<template>
  <div class="global-add-price">
    <ul class="nav-bar-wrap" ref="nav">
      <li
        v-for="tabItem in tabList"
        :key="tabItem.id"
        :class="ruleTab === tabItem.id ? 'active' : ''"
        @click="changeNav(tabItem.id)"
      >
        {{ tabItem.name }}
      </li>
    </ul>
    <div class="tab-content" v-if="ruleTab === 1">
      <p class="tip-title">按固定金额加价</p>
      <div class="prices">
        <span
          v-for="(price, index) in prices"
          :key="index"
          :class="[{ active: curPrice === price }, 'price']"
          @click="handleSelectPrice(price)"
        >
          {{ price === 0 ? '不加价' : `+${price}元` }}
        </span>
      </div>
      <p class="tip-title">
        按店主结算价的百分比加价<span class="tip-text">四舍五入取整</span>
      </p>
      <div class="prices">
        <span
          v-for="(priceRate, index) in priceRateList"
          :key="index"
          :class="[{ active: curPriceRate === priceRate }, 'price']"
          @click="handleSelectPriceRate(priceRate)"
        >
          +{{ priceRate }}%
        </span>
      </div>
    </div>
    <div class="tab-content" v-else>
      <div
        style="font-size: 0; margin-bottom: 14px;"
        v-for="(v, index) in typeList"
        :key="v.id"
      >
        <div class="custom-select" @click="typeId = v.id">
          <img
            v-if="v.id === typeId"
            src="../../../assets/addPrice/add-price-1.png"
            alt=""
          />
          <img v-else src="../../../assets/addPrice/add-price-2.png" alt="" />
          <span>{{ v.typeDes }}</span>
        </div>
        <div class="input-box" :class="{ focus: isFocus && typeId === v.id }">
          <span class="yuan">{{ v.suffixText }}</span>
          <label>
            <input
              v-model="curTypeValue[`value${index + 1}`]"
              @input="onInput"
              @blur="onBlur"
              @focus="onFocus"
              type="tel"
              :maxlength="3"
              :placeholder="v.placeholder"
              :disabled="v.id !== typeId"
            />
          </label>
        </div>
      </div>
    </div>
    <div class="effective-state-wrap">
      <p>请选择本次加价对哪种状态的活动生效</p>
      <div
        class="effective-state-select"
        v-for="v in validStatusList"
        :key="v.id"
        @click="statusId = v.id"
      >
        <img
          src="../../../assets/addPrice/icon-status-selected.png"
          alt=""
          v-if="v.id === statusId"
        />
        <img
          src="../../../assets/addPrice/icon-status-default.png"
          alt=""
          v-else
        />
        <span>{{ v.des }}</span>
      </div>
    </div>

    <div class="btn-sure-wrap" v-show="!heightChange">
      <div class="btn-sure" @click="handleSubmit">确定</div>
    </div>
    <confirm-popup ref="confirmPopup" />
  </div>
</template>

<script>
import confirmPopup from './confirmPopup.vue';

export default {
  name: 'globalAddPrice',
  components: {
    confirmPopup
  },
  data() {
    return {
      docHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      heightChange: false,

      ruleTab: 1,
      tabList: [
        { id: 1, name: '选择加价幅度' },
        { id: 2, name: '自定义加价' }
      ],
      prices: [0, 5, 10, 15],
      priceRateList: [10, 20, 30, 50],
      curPrice: 0,
      curPriceRate: '',

      curTypeValue: { value1: '', value2: '' },
      typeId: 1,
      typeList: [
        {
          id: 1,
          suffixText: '元',
          typeDes: '按固定金额加价（只支持整数）',
          placeholder: '请输入固定加价金额'
        },
        {
          id: 2,
          suffixText: '%',
          typeDes: '按百分比加价（只支持整数）',
          placeholder: '请输入百分比加价参数'
        }
      ],
      statusId: 1,
      validStatusList: [
        {
          id: 1,
          des: '对后续上架活动生效，店铺内当前在售和预告的活动价格不变'
        },
        {
          id: 2,
          des: '当前及后续上架的所有活动均生效'
        }
      ],

      isFocus: false
    };
  },
  watch: {
    showHeight() {
      this.heightChange = this.docHeight > this.showHeight;
    }
  },
  methods: {
    changeNav(tabId) {
      this.ruleTab = tabId;
    },
    handleSelectPrice(price) {
      if (price === 15) {
        this.$toast('加价超过15元，顾客购买商品时将无法享受优惠券抵扣政策');
      }
      this.curPrice = price;
      this.curPriceRate = '';
    },
    handleSelectPriceRate(priceRate) {
      this.curPriceRate = priceRate;
      this.curPrice = '';
    },
    onBlur() {
      this.isFocus = false;
      window.scroll(0, 0);
    },
    onFocus() {
      this.isFocus = true;
    },
    onInput(e) {
      const value = e.target.value || '';
      console.log('value===', value);
      const reg = value.length >= 2 ? /^[1-9]\d*/ : /\d*/;
      if (reg.test(value)) {
        if (value > 100 || value < 0) {
          const msg =
            this.typeId === 1 ? '商品加价上限为100元' : '请输入0-100之间整数';
          this.$toast(msg);
        }
      } else {
        this.$toast('请输入0-100之间整数或格式不正确');
      }
    },
    handleSubmit() {
      const params = {};
      if (this.ruleTab === 1) {
        if (this.curPrice !== '') {
          params.curPrice = this.curPrice;
        } else if (this.curPriceRate !== '') {
          params.curPriceRate = this.curPriceRate;
        }
      } else if (this.ruleTab === 2) {
        if (this.curTypeValue[`value${this.typeId}`]) {
          params.curTypeValue = this.curTypeValue[`value${this.typeId}`];
        }
      }

      params.statusId = this.statusId;

      this.$app.statistic({
        actionType: 'click',
        spm: '1040.1035',
        currentProperties: {}
      });

      console.log('params', params);
    }
  },
  mounted() {
    console.log('globalAddPrice-mounted====');
    this.$app.statistic({
      actionType: 'pageview',
      spm: '1040'
    });

    window.onresize = () =>
      (() => {
        this.showHeight = document.documentElement.clientHeight;
      })();
  }
};
</script>

<style lang="scss" scoped>
.global-add-price {
  .nav-bar-wrap {
    /*flex: 1;*/
    height: 0.84rem;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.78rem;

    li {
      flex: 1;
      font-size: 0.26rem;
      height: 100%;
      text-align: center;
      color: #999999;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &.active {
        color: #333333;
        font-weight: 500;

        &:after {
          content: '';
          display: block;
          width: 1.08rem;
          height: 0.04rem;
          background: #e62525;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -0.54rem;
        }
      }
    }

    li:last-child {
      &:before {
        content: '';
        display: block;
        width: 1px;
        height: 0.32rem;
        background-color: #f0f0f0;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.16rem;
      }
    }
  }

  .tab-content {
    height: 3.64rem;
    padding: 0.4rem 0.22rem 0.4rem 0.24rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    box-sizing: border-box;

    .tip-title {
      color: #333333;
      font-size: 0.24rem;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      margin-bottom: 0.2rem;

      .tip-text {
        color: #999999;
        font-size: 0.2rem;
        margin-left: 0.34rem;
        font-weight: normal;
      }
    }

    .prices {
      display: flex;
      margin-bottom: 0.32rem;
      .price {
        display: block;
        width: 1.6rem;
        height: 0.72rem;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(204, 204, 204, 1);
        text-align: center;
        line-height: 0.72rem;
        font-size: 0.24rem;
        margin-right: 0.08rem;
        color: #333333;
        font-weight: 500;
      }
      .active {
        border: 1px solid rgba(230, 37, 37, 1);
        color: #e62525;
      }
    }

    .custom-select {
      display: flex;
      align-items: center;
      margin-bottom: 0.18rem;
      img {
        width: 0.28rem;
        height: 0.28rem;
      }

      span {
        color: #333333;
        font-size: 0.24rem;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        margin-left: 0.1rem;
      }
    }
    .input-box {
      width: 6.5rem;
      height: 0.84rem;
      border: 1px solid #cccccc;
      display: flex;
      position: relative;
      align-items: center;
      color: #ccc;
      font-size: 0.28rem;
      border-radius: 0.04rem;
      box-sizing: border-box;
      padding-left: 0.32rem;

      .yuan {
        color: #333;
        position: absolute;
        top: 0.2rem;
        right: 0.24rem;
        font-weight: 500;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium;
      }
      input {
        font-size: 0.28rem;
        caret-color: #e62525;
        background-color: transparent;
        color: #333;
        &::-webkit-input-placeholder {
          color: #ccc;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .focus {
      border: 1px solid #e62525;
    }
  }

  .effective-state-wrap {
    height: 2.44rem;
    padding: 0.24rem;
    background-color: #fff;
    box-sizing: border-box;

    p {
      color: #333;
      font-size: 0.26rem;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }

    .effective-state-select {
      display: flex;
      font-size: 0.24rem;
      align-items: center;
      margin-bottom: 0.4rem;
      color: #666666;
      img {
        width: 0.32rem;
        height: 0.32rem;
        margin-right: 0.12rem;
      }
    }
    .effective-state-select:last-child {
      margin-bottom: 0;
    }
  }

  .btn-sure-wrap {
    width: 7.5rem;
    height: 1.24rem;
    background: #fff;
    position: absolute;
    bottom: 0;

    div {
      width: 6.86rem;
      height: 0.84rem;
      background: #e62525;
      border-radius: 0.44rem;
      margin: 0.2rem auto;
      text-align: center;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: normal;
      font-size: 0.32rem;
    }
  }
}
</style>
